<template>
  <div class="full-calendar-header">
    <div class="header-left">
      <slot name="header-left">
      </slot>
    </div>
    <div class="header-center">
      <span class="prev-month" @click.stop="goPrev">{{leftArrow}}</span>
      <span class="title">{{title}}</span>
      <span class="next-month" @click.stop="goNext">{{rightArrow}}</span>
    </div>
    <div class="header-right">
      <slot name="header-right">
      </slot>
    </div>
  </div>
</template>
<script type="text/babel">
  import dateFunc from './dateFunc'
  import moment from 'moment';

  export default {
    props : {
      currentMonth : {},
      titleFormat  : {},
      firstDay     : {},
      monthNames   : {},
      locale       : {},
      typesof      : {},
    },
    data () {
      return {
        leftArrow  : '<',
        rightArrow : '>'
      }
    },
    computed: {
      title () {
        // if (!this.currentMonth) return;
        if(this.typesof==0){
        // 月
          return this.currentMonth.locale(this.locale).format("YYYY-MM")
        }else if(this.typesof==1){
          // 周
        return moment(this.currentMonth).startOf('isoWeek').format("YYYY-MM-DD")+'------'+moment(this.currentMonth).endOf('isoWeek').format("YYYY-MM-DD")
        }else if(this.typesof==2){
           //天
          //  console.log(moment(this.currentMonth))
        return this.currentMonth.locale(this.locale).format("YYYY-MM-DD")
        }
      }
    },
    methods : {
      // 左
      goPrev () {
        if(this.typesof==0){
        // 月
          var newMonth = moment(this.currentMonth).subtract(1, 'months').startOf('month');
        }else if(this.typesof==1){
          // 周
        var newMonth = moment(this.currentMonth).subtract(1, 'weeks').startOf('isoWeek');
        }else if(this.typesof==2){
           //天
       var newMonth = moment(this.currentMonth).subtract(1, 'days').startOf('day');
        }
        this.$emit('change', newMonth);
      },
      // 右
      goNext () {
         if(this.typesof==0){
        // 月
          var newMonth = moment(this.currentMonth).add(1, 'months').startOf('month');
        }else if(this.typesof==1){
          // 周
        var newMonth = moment(this.currentMonth).add(1, 'weeks').startOf('isoWeek');
        }else if(this.typesof==2){
           //天
       var newMonth = moment(this.currentMonth).add(1, 'days').startOf('day');
        }
        this.$emit('change', newMonth);
      }
    }
  }
</script>
<style lang="scss">
.full-calendar-header{
  display: flex;
  align-items: center;
  .header-left,.header-right{
    flex:1;
  }
  .header-center{
    flex:3;
    text-align:center;
    .title{
      margin: 0 10px;
    }
    .prev-month,.next-month{
      cursor: pointer;
    }
  }
}
</style>
